import React, { useState, useEffect } from "react";
import './modal.css'

/**
 * 
 * @param {visible boolean} props 显示控制
 * @returns 
 */
const Modal = (props) => {
    const [visible,setVisible] = useState(false)
    const { visible: show, children, title } = props
    const { onClose, onConfirm } = props
    useEffect(() => {
        console.log('---------')
        setVisible(show)
    }, [show])

    const closeModal = () => {
        console.log('关闭')
        setVisible(false)
        onClose && onClose()
    }

    const confirm = () => {
        console.log('想要确定吗？')
        setVisible(false)
        onConfirm && onConfirm()
    }

    const maskClick = () => {
        setVisible(false)
        onClose && onClose()
    }

    return (
         
        
        visible && <div className="modal-wrapper">
                <div className="modal">
                    <div className="modal-title">{title}</div>
                    <div className="modal-content">{children}</div>
                    <div className="modal-operator">
                        <button className="modal-operator-close" onClick={closeModal}>取消</button>
                        <button className="modal-operator-confirt" onClick={confirm}>确定</button>
                    </div>
                </div>
                <div className="mask" onClick={maskClick}></div>
            </div>
        
    )
}

export default Modal